<template>
    <div class="detail">
        <img :src="detail.img" alt="">
        <div class="detailList">
            <div class="detailLeft">
                <p>{{detail.title}}</p>
                <p>{{detail.word}}</p>
                <p>以现代的无屏障全方位立体观赏取代了传统龙蛇观赏方式。</p>
            </div>
            <div class="detailRight">
                
                <el-rate
             score-template="{value}"    
          v-model="value"
           disabled
            show-score
          text-color="#ff9900"
         > 
        </el-rate>
        <div class="remark">2611条点评</div>
            </div>
        </div>
        <div class="center">
            <div class="centerList">
        <h2>大门票</h2>
          <p>月售4.6万笔  大门票+表演+龙车+小火车票</p>
            </div>
            <div class="centertop">
                 <h2>大门票</h2>
          <p>月售4.6万笔  大门票+表演+龙车+小火车票</p>
            </div>
         
        </div>
        <div class="foter">
            <van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
  <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
  <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
  <van-goods-action-button
    type="danger"
    text="立即购买"
    @click="onClickButton"
  />
</van-goods-action>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
import {mapState}from "vuex"
export default {
    computed:{
       ...mapState(['detail'])
    },
    data(){
        return{
            value: 3.7
        }
    },
    methods:{
         onClickIcon() {
      Toast('点击图标');
    },
    onClickButton() {
        this.$router.push('/login')
    },
    },
    created(){
        this.$store.dispatch('getDetail',{id:this.$route.params.id})
    }
}
</script>
<style lang="css" scoped>
    .detail{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .detail img{
         width: 100%;
         height: 200px;
    }
    .detailList{
        display: flex;
    }
    .detailLeft{
        border-right: 1px solid yellow;
    }
    .remark{
        margin-top: 21px;
        color: skyblue;
    }
    .center{
        width: 90%;
        height: 200px;
        background: skyblue;
        margin: 0px auto;
        margin-top: 30px;
    }
    .centerList{
        width: 100%;
        height: 90px;
        
     
        border-bottom: 1px solid lightgray;
    }
    .foter{
        width: 100%;
        /* position: absolute;
        bottom: 0; */
    }
</style>